<template>
	<view class="message-container">
		<!-- 分割线 -->
		<view class="divider">
			<view class="line"></view>
			<view class="content">内容为此处有 {{ messages.length }} 条消息</view>
			<view class="line"></view>
		</view>

		<!-- 消息列表 -->
		<view class="message-list">
			<view v-for="(message, index) in messages" :key="index" class="message-item">
				<view class="message-title">{{ message.title }}</view>
				<view class="message-time">{{ message.createDate }}</view>
				<view class="message-content">{{ message.content }}</view>
			</view>
		</view>


		<!-- 没有更多内容了 -->
		<view class="divider">
			<view class="line"></view>
			<view class="content">没有更多内容了</view>
			<view class="line"></view>
		</view>
	
	</view>
</template>

<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app';
	import { getMessage } from '../../services/mine'
	import { ref } from 'vue';
	import {useMemberStore} from '../../stores';
	const memberStore = useMemberStore()
	let {userInfo} = memberStore.profile;
	import type { Message } from '/@/types/member';
	let messages : Message[] = ref([
	]);
onLoad(async () => {
  try {
	
    const res = await getMessage(userInfo.userId);
    messages.value = res.data;
   
  } catch (error) {
    console.error('Error during onLoad:', error);
  }
});

</script>

<style scoped>
	page {
		height: 100%;
		overflow: hidden;
		background-color: #f7f7f8;
	}

	.message-container {
		padding: 20px;
	}

	.divider {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 10px;
	}

	.line {
		flex: 1;
		height: 0.5px;
		background-color: #ccc;
	}

	.content {
		margin: 0 10px;
		color: #999;
		font-size: 14px;
	}

	.message-list {
		background-color: #f5f5f5;
		border-radius: 5px;
		padding: 10px;
	}

	.message-item {
		background-color: #ffffff;
		box-shadow: 0px 0px 1px 1px #9c9ea1;
		border-radius: 5px;
		margin-bottom: 10px;
		padding: 10px;
	}

	.message-title {
		font-size: 15px;
		font-weight: 500;
		margin-bottom: 5px;
	}

	.message-time {
		color: #797979;
		font-size: 12px;
		margin-bottom: 5px;
	}

	.message-content {
		font-size: 14px;
		color: #333;
	}

	.end-message {
		text-align: center;
		color: #999;
		font-size: 14px;
		margin-top: 10px;
	}
</style>